<template>
  <div class="accountWraper">
    <!-- 用户 -->
    <div class="accountDropdown">
      <a-dropdown :trigger="['click']">
        <a class="ant-dropdown-link">
          <a-icon
            style="margin:0 4px"
            type="user"
          />
          <span style="color:#cdcdcd;font-weight: bold;">{{ loginCode }}</span>
        </a>
        <a-menu
          slot="overlay"
          class="user-dropdown-menu-wrapper"
        >
          <a-menu-item key="3">
            <a @click="changePassword">
              <span>{{ $t('modifyPassword') }}</span>
            </a>
          </a-menu-item>
          <a-menu-item key="2">
            <a @click.stop="$router.push({name:'selfConfig',params:{userCode:userId}})">
              <span>{{ $t('userSettings') }}</span>
            </a>
          </a-menu-item>
          <a-menu-item key="4">
            <a @click="handleLogout">
              <span>{{ $t('logOut') }}</span>
            </a>
          </a-menu-item>
          <a-divider type="horizontal" />
          <a-menu-item key="5">
            <a @click="changgeLange('zhCN')">
              <span>中文简体</span>
            </a>
          </a-menu-item>
          <a-menu-item key="6">
            <a @click="changgeLange('zhTW')">
              <span>中文繁体</span>
            </a>
          </a-menu-item>
          <a-menu-item key="7">
            <a @click="changgeLange('en')">
              <span>English</span>
            </a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <modifyPassword ref="modifyPassword"></modifyPassword>
  </div>
</template>

<script>
import NoticeIcon from '@/components/NoticeIcon'
import { mapActions, mapGetters } from 'vuex'
import { loginMonitorWithoutPwd } from '@/api/login'
import modifyPassword from '@/components/SelfModal/ModifyPassword'

export default {
  name: 'UserMenu',
  components: {
    NoticeIcon,
    modifyPassword
  },
  data () {
    return {
      newssrc: ''
    }
  },
  computed: {
    ...mapGetters(['locale', 'userId', 'loginCode', 'token']),
    defaultAvatar () {
      return require('@/assets/defaultuser.png')
    },
    localeText () {
      let text = ''
      switch (this.locale) {
        case 'zhCN':
          text = '中文简体'
          break
        case 'zhTW':
          text = '中文繁体'
          break
        case 'enUS':
          text = 'English'
          break
        default:
          text = '中文简体'
          break
      }
      return text
    }
  },
  methods: {
    ...mapActions(['Logout']),
    // 修改密码弹框
    changePassword () {
      this.$refs.modifyPassword.visible = true
    },
    loginMonitor () {
      const vm = this
      const monitorCurrentUser = vm.$Cookies.get('currentUser')
      if (monitorCurrentUser && monitorCurrentUser !== vm.loginCode) {
        vm.$confirm({
          title: vm.$t('tip'),
          content: vm.$t('monitorexistsuser'),
          onOk () {
            vm.$Cookies.set('currentUser', monitorCurrentUser)
            const newWindow = window.open('_blank')
            newWindow.location = vm.newssrc
          },
          onCancel () { }
        })
      } else {
        loginMonitorWithoutPwd().then(data => {
          if (data.success) {
            vm.$Cookies.set('token', data.data)
            vm.$Cookies.set('currentUser', vm.loginCode)
            if (!vm.$Cookies.get('lang')) {
              if (vm.locale === 'zhCN' || vm.locale === 'zhTW') {
                vm.$Cookies.set('lang', 'zh')
              } else {
                vm.$Cookies.set('lang', 'en')
              }
            }
            const newWindow = window.open('_blank')
            newWindow.location = vm.newssrc
          }
        })
      }
    },
    // 退出登录
    handleLogout () {
      const that = this
      this.$confirm({
        title: that.$t('tip'),
        content: that.$t('logOutComfirm'),
        onOk () {
          return that.Logout().then(() => {
            window.location.reload()
          })
        },
        onCancel () { }
      })
    },
    changgeLange (value) {
      const { $store } = this
      $store.commit('SET_LANG', value)
    }
  },
  created () {
    // 监控地址
    if (process.env.VUE_APP_monitorURL) {
      this.newssrc = process.env.VUE_APP_monitorURL
    }
  }
}
</script>
<style lang="less">
// 头部账号下拉菜单
.accountWraper {
  padding-right: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  .accountDropdown {
    >div {
      top:40px !important;
    }
    .ant-dropdown {
      top:0 !important;
    }
    div:nth-child(1) {
      z-index: 2001;
    }
  }
}
</style>
